<template>
	<view class="slider-wrapper" @touchstart="onTouchstart" @touchend="onTouchend">
		<view class="slider-box" >
			<!-- <view class="flex"></view> -->
			<movable-area class="sliderBar">
				<view class="gone" :style="{width: x +'px'}" ></view>
				<movable-view class="slider" :x="x" :y="y" direction="all" @change="onChange" :animation="true">
					<!-- <text>{{ score }}</text> -->
					<view class="after"></view>
				</movable-view>
			</movable-area>
			<!-- <view :style="{width: (100 - maxScore) +'%'}"></view> -->
		</view>
	</view>
</template>

<script>
	import {debounce} from'@/utils/utils.js'
	export default {
		props:['min','max'],
		data() {
			return {
				slideBarWidth:0,
				minScore: this.min?this.min:0,
				maxScore: this.max?this.max:100,
				x: 0,
				y: 0,
				score: this.min?this.min:0,
				touchStatus: false // 触摸状态
			};
		},
		created() {
			var that = this;
			this.$nextTick(()=>{
				uni.createSelectorQuery().in(this).select(".slider-box").boundingClientRect(function(res) {
					that.slideBarWidth = res.width
				}).exec();
			})
			// 防抖函数
			this.handleSetX = debounce(this.handleSetX, 300)
		},
		methods:{
			onChange: function(e,i) {
				this.handleSetX(e.detail.x)
				this.score = e.detail.x / this.slideBarWidth + this.minScore
				this.$emit('onChange',this.score)
			},
			
			handleSetX (x) {
				this.x = x
			},
			onTouchstart () {
				console.log('slider 触摸开始')
				this.touchStatus = true
				this.$emit('touchStatus', true)
			},
			onTouchend () {
				console.log('slider 触摸结束')
				this.touchStatus = false
				this.$emit('touchStatus', false)
			},
			// 外部设置的值
			setValue (percent) {
				// 当触摸时，禁止进度条自动滚动
				if (this.touchStatus) return false
				const dis = percent * this.slideBarWidth
				this.x = dis
			}
		}
	}
</script>

<style lang="scss">
	$uni-color-primary: rgba(255,255,255,.7);
	$h: 4upx;
	.slider-wrapper {
		width: 90vw;
		margin: -24upx auto;
	
	}
	.slider-box {
		display: flex;
		width: 100%;
		// height: 32rpx;
		height: 64rpx;
		position: relative;
		&::before{
			content: '';
			position: absolute;
			height: $h;
			border-radius: $h;
			background-color: rgba(255,255,255, .1);
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
		}
		// .flex {
		// 	flex: 1;
		// 	height: $h;
		// 	border-radius: $h 0 0 $h;
		// 	background-color: rgba(255,255,255, .5);
		// 	margin-top: 12rpx;
		// 	position: relative;
		// 	z-index: 1;
		// }

		.sliderBar {
			height: 100%;
			border-radius: $h;
			width: 100%;
			.gone {
				background-color: $uni-color-primary;
				height: 100%;
				position: absolute;
				left: 0;
				height: $h;
				top: 50%;
				max-width: 100%;
				z-index: 1;
				transform: translateY(-50%);
				border-radius: 0 $h $h 0;
				transition: width .38s linear;
			}
			.slider {
				width: 0;
				height: 100%;
				position: relative;
				z-index: 2;
				.after {
					// content: '';
					position: absolute;
					border-radius: 50%;
					// background-color: $uni-color-primary;
					background-image: radial-gradient(circle at 50% 50%, $uni-color-primary 15%, transparent 15% );
					// width: 32rpx;
					width: 64rpx;
					height: 100%;
					transform: translatex(-50%);
				}
				text {
					position: absolute;
					width: 60rpx;
					color: white;
					border-radius: 14rpx;
					top: -140%;
					left: 50%;  
					text-align: center;
					transform: translateX(-50%);
					background-color: $uni-color-primary;
					&::after {
						content: '';
						position: absolute;
						border: 6rpx solid transparent;
						border-top-color: $uni-color-primary;
						top: 99%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
</style>
